객체 메서드

객체 메서드#

  • 객체지향 프로그래밍
    • 객체를 사용하여 개체를 표현하는 방식

객체 (유일무이한) 실존하는 개체(entity)를 표현하고자 할 때 생성한다.

let user = {
name: 'John',
age: 30,
}

예) 사용자(user), 주문(order)
사용자는 현실에서, 장바구니에서 물건 선택, 로그인, 로그아웃 등의 행동을 한다.
객체 프로퍼티에 함수 할당 마찬가지로 사용자를 나타내는 객체 user 도 특정한 행동을 할 수 있다.

메서드 만들기#

메서드 객체 프로퍼티에 할당된 함수

객체 user 에게 인사할 수 있는 능력 부여

함수 표현식#

  • 함수 표현식으로 함수를 만든다.
  • user.sayHi 에 함수를 할당한다.
let user = {
name: 'John',
age: 30,
};
user.sayHi = function() {
alert('안녕하세요!');
};
user.sayHi();

함수 선언식#

function sayHi () {
alert('안녕하세요');
}
user.sayHi = sayHi;
user.sayHi();

메서드 단축 구문#

두 구분이 완전히 동일하지는 않다. 객체 상속과 관련된 미묘한 차이가 존재한다. TODO

user = {
sayHi: function() {
alert('Hello');
}
};
user = {
sayHi () {
alert('Hello');
}
};

메서드와 this#

this 키워드 메서드 호출시, 해당 메소드를 갖고 있는 객체

let user = {
name: "John",
age: 30,
sayHi() {
alert(this.name);
}
};
user.sayHi() // John

this 대신 user 사용했을 때, 예상치 못한 에러가 발생할 수 있다.

let user = {
name: "John",
age: 30,
sayHi() {
alert(user.name); // Error: Cannot read property 'name' of null
}
};
let admin = user;
user = null;
admin.sayHi(); // sayHi() 가 엉뚱한 객체를 참고하면서 에러가 발생함.

this 는 런타임. 컨텍스트에 따라 달라진다.

  • 장점 : 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다
  • 단점 : 유연함이 실수로 이어질 수 있다

어떤 객체의 메소드로 사용되느냐에 따라 메소드 내부의 this 가 가리키는 객체가 달라질 수 있다

function introduce() {
return `안녕하세요, 제 이름은 ${this.name}입니다.`;
}
const person1 = {
name: '윤아준',
introduce
};
const person2 = {
name: '신하경',
introduce
};
person1.introduce(); // 안녕하세요, 제 이름은 운아준입니다.
person2.introduce(); // 안녕하세요, 제 이름은 신하경입니다.

this 가 없는 화살표 함수#

let user = {
firstName: "보라",
sayHi() {
let arrow = () => alert(this.firstName);
arrow();
}
};
user.sayHi(); // 보라

arrow()의 this 는 외부 함수 user.sayHi()의 this 이다.

new 연산자와 생성자 함수#

재사용할 수 있는 객체 생성 코드를 구현

  • 객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있다.

생성자 함수#

생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다.

생성자 함수의 관례

  1. 함수 이름의 첫 글자는 대문자로 시작
  2. 반드시 "new" 연산자를 붙여 실행

new 생성자 함수의 알고리즘#

  1. 빈 객체를 만들어 this 에 할당
  2. 함수 본문을 실행 : this에 새로운 프로퍼티를 추가해 this 를 수정
  3. this 를 반환
function User(name) {
// this = {}; (빈 객체가 암시적으로 만들어짐)
// 새로운 프로퍼티를 this에 추가함
this.name = name;
this.isAdmin = false;
// return this; (this가 암시적으로 반환됨)
}
let user = new User("Jack");
/*
let user = {
name: "Jack",
isAdmin: false
};
*/

모든 함수는 생성자 함수가 될 수 있다

  • new 를 붙여 실행한다면 어떤 함수라도 위에 위 알고리즘이 실행
  • 이름 "첫 글자가 대문자"인 함수는 new 를 붙여 실행해야 한다(?)

(TODO 화살표 함수는 new 를 사용할 수 없는데... 어떻게 분류될까 )

재사용할 필요가 없는 복잡한 객체#

코드를 익명 생성자 함수로 감싸주는 방식

let user = new function() {
this.name = "John";
this.isAdmin = false;
// 사용자 객체를 만들기 위한 여러 코드.
// 지역 변수, 복잡한 로직, 구문 등의
// 다양한 코드가 여기에 들어갑니다.
};

위 생성자 함수는 익명 함수이기 때문에 어디에도 저장되지 않습니다.

Last updated on